<template>
    <div class="bottom">
        <div class="page-bottom">
            <div class="desc">
                <img class="desc-img" src="@assets/bottom_desc.png" alt="">
                <div class="icon">
                   <!-- <a href="javascript:void(0)" target="_blank" style="{display: none}">
                        <div class="sina" src="" alt=""></div>
                    </a>-->
                    <img class="wchat" src="@assets/wchat.png" alt="" @mouseenter="mouseover" @mouseleave="mouseLeave">
                    <div class="code_img" :class="show ? 'showCode' : ''">
                        <img src="@assets/publicNum.png" alt="">
                    </div>
                </div>
            </div>
            
            <div class="email">
                <p>Email&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;qutanlu@qutanlu.com</p>
            </div>
            
            <div class="address">
<!--                <p>Address&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;广东省广州市天河区冼村街道珠江新城华夏路富力盈通大厦2113</p>-->
                <p>侵权投诉指引粤ICP备 <a href="http://www.beian.miit.gov.cn" target="_blank">17143885</a>号 Copyright © 2019-2024 广州趣探路信息服务有限公司</p>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "PageBottom",
        data() {
            return {
                show: false
            }
        },
        methods: {
            mouseover() {
                this.show = true
            },
            mouseLeave() {
                this.show = false
            }
        }
    }
</script>

<style scoped lang="less">
    .bottom {
        width: 100%;
        min-width: 1128px;
        background: rgba(0, 0, 0, .04);
    }
    
    .page-bottom {
        width: 1128px;
        padding-bottom: 40px;
        margin: 0 auto;
        padding-top: 26px;
        
        p {
            display: inline-block;
            height: 20px;
            font-size: 12px;
            font-weight: 300;
            color: #000000;
            line-height: 20px;
            margin-bottom: 8px;
        }
        
        .desc {
            position: relative;
            margin-bottom: 21px;
            
            .desc-img {
                display: inline-block;
                width: 225px;
                height: auto;
            }
            
            .icon {
                position: absolute;
                top: 0;
                right: 0;
                height: 40px;
                
                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    cursor: pointer;
                }
                
                .sina {
                    background-color: transparent;
                    margin-right: 32px;
                }
                
                .code_img {
                    opacity: 0;
                    position: absolute;
                    bottom: 59px;
                    right: 0;
                    width: 130px;
                    height: 130px;
                    
                    img {
                        border-radius: 0;
                        width: 100%;
                        height: auto;
                        background-color: transparent;
                    }
                }
                
                .showCode {
                    opacity: 1 !important;
                }
            }
        }
        
        .address {
            .flexed(space-between);
             a{
                 color:  #0066cc;
             }
        }
    }

</style>
